<template>
    
    <div>
        <van-nav-bar title="物流详情" class="nav" left-arrow @click-left="onClickLeft"/>
        <scroller  :on-refresh ="refresh"  :noDataText="noDataText" ref="my_scroller" >
        <!-- <div class="main"  v-if="list.data.length !== 0"> -->
        <div class="main"  v-if="list.order_info">
            <!-- <h4>快递小哥正在飞速赶来的路上~</h4> -->
            <div class="header">
                <p><span>收货信息： </span><span>{{list.order_info.consignee}}，{{list.order_info.phone}}，{{list.order_info.address_deta}}</span></p>
                <p><span>订单信息： </span><span>{{list.order_info.goods_info}}</span>
                <p><span>备注信息： </span><span>{{list.order_info.log_name}}</span></p>
                <!-- <hr> -->
                <div></div>
                <p><span>快递类型： </span><span>{{logisticsType?logisticsType:"暂无"}}</span></p>
                <p><span>快递单号： </span><span>{{list.nu?list.nu:"暂无"}} <i v-if="list.nu"  v-clipboard:copy="this.list.nu"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"></i></span>
                <!-- <span><i  v-clipboard:copy="this.list.nu"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"></i>     </span>            -->
                </p>
            </div>
            <van-steps :active="active" direction="vertical" class="item">
                <van-step v-for="item in list.data" :key="item.time">
                    <p>{{item.context}}</p>
                    <p>{{item.time}}</p>
                </van-step>
            </van-steps>
        </div>
        <no-data v-else></no-data>
        </scroller>
    </div>

</template>

<script>
import noData from '@/components/noData.vue';
import {Toast} from 'vant';
    export default {
        data() {
            return {
                active: 0,
                noDataText:"--我也是有底线的--", 
                list:{data:[],nu:"",com:""},
            };
        },
        components: {
            noData,
        },
        computed: {
            logisticsType() {
                if(this.list.com ==="zhongtong"){
                    return "中通快递"
                }else if(this.list.com === "shunfeng"){
                    return "顺丰快递"
                }else{
                    return this.list.com
                }
            }
        },
        methods: {
            onCopy(){
                Toast("复制成功")
            },
            onError(){
                Toast("复制失败")
            },
            refresh(done){
                this.getData(done);
                
                
            },
           async getData(done){    
                try {   
                    const res =  await this.apiPost("Express/get_logistics",{
                            token:localStorage.getItem("token"),
                            order_id:this.$route.query.id
                        });
                        if(res.data.code === 400){
                            this.list = res.data.data;
                            console.log(this.list);
                            Toast(res.data.message)
                            if(done){
                                done()
                            }
                        }else if(res.data.code ===200){
                            this.list = res.data.data;
                            console.log(this.list);
                             if(done){
                                done()
                            }
                        }else{
                            Toast(res.data.message)
                        }
                } catch (error) {
                    // console.log(error);
                    Toast("网络错误,请稍后再试!")
                }
            },
             onClickLeft(){
                this.$router.back(-1)
            }
        },
       mounted () {
             this.getData()
        },
    }
</script>

<style  scoped>
.header{
    margin-top: 2.667vw;
    background-color: #fff;
    border-top-left-radius: 1.867vw;
    border-top-right-radius: 1.867vw;
}
.header div{
    height: 1px;
    border-bottom:1px solid #ccc ;
    margin: 10px 5.333vw 10px 9.333vw;
}
/* .header hr{
    margin: 10px 5.333vw 10px 9.333vw;
    height: 1px;
} */
.header p{
    display: flex;
    text-align: left;
    line-height: 1.5em;
    color: #969799;
    font-size: 4.267vw;
    padding-left:34.999px;
    padding-right:5.333vw;
}
.header p span:nth-child(1){
    font-weight: 600;
    flex: 1.2;
}
.header p span:nth-child(2){
    flex: 3;
}
.header p i{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("../../assets/i/home/copy.png");
    background-repeat: no-repeat;
    background-size: 80%;
    background-position-x: center;
    background-position-y: 120%;
}
.nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10!important;
}
.main{
    overflow: hidden;
    margin-top: 46px;
    padding:0 2.667vw;
}
.item{
    text-align: left;
}
.item p:nth-child(2){
    font-size: 3.2vw;
}
</style>